import React, { Component, createRef } from 'react'
import echarts from 'echarts'
import {Col, Row} from 'antd'
import { getData } from '../../api/dashboard'
import 'echarts/map/js/china.js'

export default class index extends Component {

  state = {
    lastUpdateTime: '',
    chinaTotal: {},
    chinaAdd:{}
  }

  chartRef = createRef()
  componentDidMount() {
    getData()
      .then(res=>{
        const data = JSON.parse(res.data.data)

        this.setState({
          lastUpdateTime: data.lastUpdateTime,
          chinaTotal: data.chinaTotal,
          chinaAdd: data.chinaAdd
        })

        const mapData = data.areaTree[0].children.map(area => ({
          name: area.name,
          value: area.total.nowConfirm
        }))
        this.drawMap(mapData)
      })
  }

  drawMap = mapData => {
    const myChart = echarts.init(this.chartRef.current)
    myChart.setOption({
      title: {
        text: '全国疫情地图',
        subtext: '最新疫情数据，数据来源于腾讯',
        sublink: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c}'
      },
      visualMap: {
        type: 'piecewise',
        pieces: [
          {gte: 10000, color: 'red'},
          {gte: 1000, lt: 10000, color: 'red', colorAlpha: 0.8},
          {gte: 100, lt: 1000, color: 'red', colorAlpha: 0.6},
          {gte: 10, lt: 100, color: 'red', colorAlpha: 0.4},
          {gte: 1, lt: 10, color: 'red', colorAlpha: 0.2},
          {value: 0, color: 'white'}
        ]
      },
      series: [
        {
            name: '疫情数据',
            type: 'map',
            mapType: 'china', // 自定义扩展图表类型
            label: {
                show: true
            },
            data: mapData
          }
      ]
    })
  }

  randomColor = () => {
    const baseChars = '0123456789ABCDEF'
    const len = baseChars.length
    let str = "#"
    for (let i = 0; i < 6; i++) {
      const ch = baseChars.charAt(Math.floor(Math.random() * len))
      str += ch
    }
    return str
  }
  render() {
    const style = { background: '#0092ff', padding: '8px 0'}
    const {chinaTotal, chinaAdd} = this.state
    const {
       confirm,
       heal,
       dead,
       nowConfirm,
       suspect,
       nowSevere,
       importedCase,
       noInfect
      } = chinaTotal

    return (
      <div>
        <Row gutter={[16, 24]}>
          <Col className="gutter-row" span={6} style={{background: this.randomColor()}}>
            <div>现有确诊</div>
            <div>{nowConfirm}</div>
            <div>昨日{chinaAdd.nowConfirm}</div>
          </Col>
          <Col className="gutter-row" span={6} style={{background: this.randomColor()}}>
            <div>无症状</div>
            <div>{noInfect}</div>
            <div>昨日{chinaAdd.noInfect}</div>
          </Col>
          <Col className="gutter-row" span={6} style={{background: this.randomColor()}}>
            <div>现有疑似</div>
            <div>{suspect}</div>
            <div>昨日{chinaAdd.suspect}</div>
          </Col>
          <Col className="gutter-row" span={6} style={{background: this.randomColor()}}>
            <div>现有重症</div>
            <div>{nowSevere}</div>
            <div>昨日{chinaAdd.nowSevere}</div>
          </Col>
          <Col className="gutter-row" span={6} style={{background: this.randomColor()}}>
            <div>累计确诊</div>
            <div>{confirm}</div>
            <div>昨日{chinaAdd.confirm}</div>
          </Col>
          <Col className="gutter-row" span={6} style={{background: this.randomColor()}}>
            <div>境外输入</div>
            <div>{importedCase}</div>
            <div>昨日{chinaAdd.importedCase}</div>
          </Col>
          <Col className="gutter-row" span={6} style={{background: this.randomColor()}}>
            <div>累计治愈</div>
            <div>{heal}</div>
            <div>昨日{chinaAdd.heal}</div>
          </Col>
          <Col className="gutter-row" span={6} style={{background: this.randomColor()}}>
            <div>累计死亡</div>
            <div>{dead}</div>
            <div>昨日{chinaAdd.dead}</div>
          </Col>
        </Row>
        <div ref={this.chartRef} style={{width: '600px', height: '460px'}}></div>
      </div>
    )
  }
}
